<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国区视频网站地址解析</title>
    <script src="../src/video-url-parser.js"></script>
    <script src="../node_modules/video-provider-youku.com/index.js"></script>
    <script src="../src/cn-video-url-parser.js"></script>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font: 14px/1.3 '微软雅黑';
        }
        
        body * {
            font-family: inherit;
        }
        
        textarea {
            width: 100%;
        }
        
        pre {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 100%;
            min-height: 50px;
            padding: 10px;
            margin: 30px auto;
            word-break: break-all;
            white-space: normal;
        }
        
        .container {
            width: 80%;
            margin: 20px auto;
        }
        
        button {
            padding: 6px 20px;
            border-radius: 5px;
            border: 1px solid #eee;
            box-shadow: none;
            background: #2fb3ff;
            color: #fff;
            outline: none;
        }
        
        button:hover {
            background: #44b5f7;
        }
        
        button:focus,
        button:active {
            background: #16a4f7;
        }
        
        iframe {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <textarea id="source" rows="5"></textarea>
        <button id="btn" type="button">解析</button>
        <pre id="result"></pre>
    </div>

    <script>
        $(function() {
            $("#btn").click(function() {
                var url = $("#source").val(),
                    json = cnVideoUrlParser.parser(url);
                $("#result").html(JSON.stringify(json));
            });
        });
    </script>
</body>

</html>